<template>
    <view class="goods-list-item">
      <!-- 左边盒子 -->
      <view class="left">
        <radio color="#c00000"  @click="radioChangeHandler" :checked="val.goods_state" v-if="showRadio"></radio>
        <image :src="val.goods_small_logo || defultImg"></image>
      </view>
      <!-- 右边盒子 -->
      <view class="right">
        <view class="text">{{val.goods_name}}</view>
        <view class="goods-info-box">
          <!-- 商品价格 -->
          <view class="goods-price">¥ {{val.goods_price|picToFind}}</view>
          <!-- 商品数量 -->
          <uni-number-box @change="numberChangeHandler" v-if="countShow" :min="1" :value="val.goods_count"></uni-number-box>
        </view>
      </view>
    </view>
</template>

<script>
  export default {
    name:"my-goods",
    props:{
      val:{
        type:Object,
        default:() =>{}
      },
      // 多选框显示
      showRadio:{
        type:Boolean,
        default:false
      },
      // 商品数量的显示
      countShow:{
        type:Boolean,
        default:false
      }
    },
    filters:{
      picToFind(num){
        // console.log(num)
        // 价格保留两位小数
       return  num.toFixed(2)
      }
    },
      data() {
        return {
          defultImg:'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
        };
      },
      methods:{
        // 点击radio 
        radioChangeHandler(){
          // 给父组件传参
          this.$emit('radioChange',{
            goods_id:this.val.goods_id,
            goods_state:!this.val.goods_state
          })
        },
        // 改变商品的数量
        numberChangeHandler(val){
          // 子传父
         this.$emit('num-change', {
             // 商品的 Id
             goods_id: this.val.goods_id,
             // 商品的最新数量
             goods_count: +val
           })
        }
      }
    }
</script>

<style lang="scss">
.goods-list-item {
  width: 750rpx;
  box-sizing: border-box;
  // // 让 goods-item 项占满整个屏幕的宽度
  // width: 750rpx;
  // // 设置盒模型为 border-box
  // box-sizing: border-box;
    display: flex;
    padding: 10px 5px;
    border-bottom: 1px solid #f0f0f0;
  .left  {
    display: flex;
    // flex-direction: column;
   justify-content: center;
   align-items: center;
    margin-right: 5px;
    image {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
  .right {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
   .text {
     font-size: 13px;
   }
   .goods-info-box{
     display: flex;
     align-items: center;
     justify-content: space-between;
     .goods-price{
      font-size: 16px;
       color: #98180e;
     }
   }

  }
}
</style>
